<template>
  <r-com :leftClass="'mh-left-height'" :rightClass="'mh-right-box'" :groupClass="'mh-group'">
    <template slot="top-bar">
      <li class="el-icon-s-promotion">漫画</li>
      <li
        class="tabs-item"
        v-for="item in dateList"
        :key="item.index"
        :class="activeTypeIndex==item.index?'tabs-active':' '"
        @click="changeTab(item.index)"
      >{{item.name}}</li>
      <li class="button-group">
        <el-button>
          <i class="el-icon-refresh"></i>换一换
        </el-button>
        <el-button>
          更多
          <i class="el-icon-arrow-right"></i>
        </el-button>
      </li>
    </template>
    <template slot="video-slot">
      <div class="mh-list">
        <a href="#" class="comic-item" v-for="item in 16" :key="item">
          <el-image :src="require('../../assets/icon.jpg')"></el-image>
          <p class="mh-title a-link">碧蓝之海</p>
          <p class="mh-type">搞笑 玄幻</p>
        </a>
      </div>
    </template>
    <template slot="right-area">
      <div class="rank-box">
        <div class="rank-bar">
          <span class="rank-name">排行榜</span>
          <a
            href="#"
            v-for="item in mhrankList"
            @click.prevent="changeRankIndex(item.index)"
            :key="item.index"
            :class="item.index==activeRankIndex?'tabs-active':' '"
          >{{item.name}}</a>
          <el-button>
            更多
            <i class="el-icon-arrow-right"></i>
          </el-button>
        </div>
        <ul class="rank">
          <li>
            <a href="#" class="a-link" v-for="item in 14" :key="item">
              <div class="rank-face">
                <span class="rank-span" :class="item>3?'rank-four':' '">{{item}}</span>
                <el-image v-if="item==1" class="icon-image" :src="require('../../assets/icon.jpg')"></el-image>
                <div class="txt" v-if="item==1">
                  <p>成年之后这些就该懂了</p>
                  <p class="p2">恋爱 日常</p>
                  <p class="p2">更新至151话</p>
                </div>
                <p v-if="item>1" class="title">
                  羊村之狂龙战神
                  <span class="state">更新至33话</span>
                </p>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </template>
  </r-com>
</template>
<script>
import Rc from '../common/RowComponent'
export default {
  data() {
    return {
      activeTypeIndex: '0',
      activeRankIndex: '0',
      mhrankList: {
        yp: {
          name: '月票',
          index: '0',
        },
        yy: {
          name: '应援',
          index: '1',
        },
        bs: {
          name: '飙升',
          index: '2',
        },
      },
      dateList: {
        tj: {
          name: '人气推荐',
          index: '0',
        },
        freetj: {
          name: '免费漫画推荐',
          index: '1',
        },
        download: {
          name: '下载App',
          index: '2',
        },
      },
    }
  },
  components: {
    'r-com': Rc,
  },
  methods: {
    changeTab(index) {
      this.activeTypeIndex = index
    },
    changeRankIndex(index) {
      this.activeRankIndex = index
    },
  },
}
</script>
<style scoped>
.icon-image {
  width: 112px;
  height: 149px;
  vertical-align: middle;
}
.rank-span {
  display: inline-block;
  width: 18px;
  height: 18px;
  color: #fff;
  background-color: #49a5da;
  text-align: center;
  font-size: 14px;
  margin-right: 15px;
  margin-top: 10px;
}
.rank-four {
  background-color: transparent;
  color: #999;
}
.rank-face {
  padding-top: 10px;
  display: flex;
  height: 149px;
}
.rank-face {
  margin-bottom: 10px;
}
.rank li a:nth-child(n + 2) .rank-face {
  height: 25px;
}
.title {
  width: 100%;
  font-size: 14px;
  height: 20px;
  line-height: 37px;
}
.txt {
  margin-left: 10px;
  font-size: 14px;
  flex: 1;
}
.txt p:first-child {
  height: 45px;
}
.p2 {
  font-size: 12px;
  height: 14px;
  margin-bottom: 5px;
  color: #999;
  text-overflow: ellipsis;
  overflow: hidden;
}
.p2:hover {
  color: #999;
}
.button-group {
  float: right !important;
}
.el-button {
  height: 23px;
  font: 12px;
  background: none;
  outline: none;
  padding: 0px 7px;
  border: 1px solid #ccc;
  margin-right: 0px;
  text-align: center;
}
.el-icon-refresh {
  margin-right: 3px;
  font-size: 15px;
  transform: rotateZ(0deg);
  transition: all 0.5s;
}
.el-button:hover .el-icon-refresh {
  color: #999;
  transform: rotateZ(-360deg);
}
.rank-box .rank-name {
  font-size: 19px;
  font-weight: 400;
  height: 40px;
}
.rank-box .el-button {
  float: right;
  transform: scale(0.9);
}
.rank-box {
  height: 652px;
  overflow: hidden;
}
.tabs-item {
  font-size: 12px !important;
  margin-left: 15px;
  line-height: 26px !important;
  cursor: pointer;
}
.tabs-active {
  color: #00a1d6 !important;
  border-bottom: 1px solid #00a1d6;
}
.mh-list {
  display: flex;
  flex-wrap: wrap;
}

.comic-item .el-image {
  width: 206px;
  height: 275px;
}
.mh-title {
  width: 100%;
  color: #000;
  padding: 5px 5px;
  font-size: 15px;
}
.comic-item {
  margin-right: 8px;
  margin-bottom: 20px;
}
.mh-type {
  width: 100%;
  padding: 0px 5px;
  color: #999;
}
.rank-bar {
  margin-bottom: 3px;
}
.rank-bar a {
  display: inline-block;
  margin-left: 15px;
  font-size: 13px;
  color: #000;
  height: 25px;
}
.state {
  float: right;
  font-size: 12px;
  color: #999;
}

@media screen and (max-width: 1450px) {
  .tg-vedio:nth-child(5) {
    margin-left: 0;
  }
  .rank-box {
    height: 412px;
  }
  .comic-item .el-image {
    width: 170px;
    height: 227px;
  }
  .comic-item {
    margin-right: 5px;
  }
  .rank-box {
    height: 578px;
  }
}
</style>
